<template>
  <div class="menu-config-container">
    <!-- 1 -->
    <div class="page-title-container flex" title="租户菜单配置">
      <a-button type="default" @click="back()">返回 </a-button>
    </div>
    <div class="page-body-container" v-loading="pageLoading">
      <a-row :gutter="20">
        <!-- 新增 -->
        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="6">
          <div class="gutter-box flex add">
            <div class="body" @click="add()">
              <bj-icon-font
                type="jiahao"
                color="#D5D5D5"
                :size="50"
              ></bj-icon-font>
              <div>租户菜单配置</div>
            </div>
          </div>
        </a-col>
        <!-- 列表 -->
        <a-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="8"
          :xl="8"
          :xxl="6"
          v-for="(item, index) in menuListSource"
          :key="index"
        >
          <div class="gutter-box flex">
            <div class="header">
              <div class="title">{{ item.tenantName }}</div>
              <div class="operate flex">
                <bj-icon-font
                  type="bianji"
                  color="#0068B7"
                  :size="15"
                  @click="editor(item)"
                ></bj-icon-font>
                <bj-icon-font
                  type="shanchu"
                  color="#0068B7"
                  :size="15"
                  @click="handleDelClick(item)"
                ></bj-icon-font>
              </div>
            </div>
            <div class="body">
              <a-empty
                :image="simpleImage"
                v-if="!item.menuList || item.menuList.length == 0"
              />
              <a-tree
                :default-expand-all="true"
                :tree-data="item.menuList"
                :replaceFields="{
                  children: 'childs',
                  title: 'menuName',
                  key: 'id',
                }"
              />
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 租户菜单配置 -->
    <tenantConfigModal
      :visible.sync="tenantModalVisible"
      :tenantCode="tenantCode"
      :roleId="roleId"
    ></tenantConfigModal>
  </div>
</template>

<script>
//【菜单配置】
import tenantConfigModal from "./components/tenantConfigModal";
import {
  getTenantMenuByRoleId,
  deleteData,
} from "@/api/user-center/roleManage.js";
import { addAttributeByKey, flatTreeData } from "@/utils";
import { Empty } from "ant-design-vue";
export default {
  data() {
    return {
      tenantModalVisible: false,
      autoExpandParent: true,
      //
      pageLoading: false,
      menuListSource: [],
      tenantCode: "",
      roleId: "",
    };
  },
  components: {
    tenantConfigModal,
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  mounted() {
    this.getTenantMenuByRoleId();
  },
  methods: {
    //新增
    add() {
      let { id = "" } = this.$route.query;
      this.roleId = id;
      this.tenantCode = "";
      this.tenantModalVisible = true;
    },
    //编辑
    editor(item) {
      let { id = "" } = this.$route.query;
      let { tenantCode } = item;
      this.tenantCode = tenantCode;
      this.roleId = id;
      this.tenantModalVisible = true;
    },

    //删除
    handleDelClick(row) {
      let that = this;
      let { tenantCode } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定删除所选内容?",
        content: "删除内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          return new Promise((resolve, reject) => {
            let { id = "" } = that.$route.query;
            deleteData({ tenantCode, roleId: id })
              .then((res) => {
                let { data } = res;
                if (data?.result) {
                  that.$message.success("操作成功");
                } else {
                  that.$message.error(data?.result || "操作失败，请稍后重试！");
                }
                that.getTenantMenuByRoleId();
              })
              .catch((_) => {
                that.$message.error("操作失败，请稍后重试！");
                reject();
              })
              .finally((_) => {
                resolve();
              });
          });
        },
        onCancel() {},
      });
    },

    //查询菜单列表
    getTenantMenuByRoleId() {
      return new Promise((resolve, rejct) => {
        this.pageLoading = true;
        let { id = "" } = this.$route.query;
        getTenantMenuByRoleId({
          roleId: id,
        })
          .then((res) => {
            let { data } = res;
            (data?.result || []).forEach((v) => {
              v.childs = v.menuList;
            });
            this.menuListSource = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              data?.result || [],
              "childs"
            );
            resolve();
          })
          .catch((_) => {
            this.menuListSource = [];
            rejct();
          })
          .finally((_) => {
            this.tenantCode = "";
            this.pageLoading = false;
          });
      });
    },

    //返回
    back() {
      this.$router.push({
        path: "/nebula/user-app/roleManage",
      });
    },
  },
};
</script>

<style lang="less">
.menu-config-container {
  height: 100%;
  /deep/.ant-empty {
    margin: 0;
  }
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  .page-title-container {
    height: 46px;
    background: #ffffff;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    margin-bottom: 10px;
    &::before {
      .flex();
      align-items: center;
      content: attr(title);
      font-size: 16px;
      height: 16px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
    }
  }
  .page-body-container {
    flex: 1;
    flex-wrap: wrap;
    padding: 0 10px 0 0;
    .custom-scrollbar();
    .ant-col {
      height: 430px;
      margin-bottom: 20px;
      .gutter-box {
        background: #ffffff;
        border-radius: 4px;
        height: 100%;
        box-sizing: border-box;
        padding: 0 14px 14px 14px;
        flex-direction: column;
        transition: 0.3s;
        overflow: hidden;
        &.add {
          padding: 14px;
          cursor: pointer;
          .body {
            .flex();
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #999999;
          }
        }

        &:hover {
          box-shadow: 0px 10px 23px 1px rgba(55, 89, 160, 0.15);
          .header {
            .operate {
              visibility: visible;
            }
          }
        }
        .header {
          height: 50px;
          flex-shrink: 0;
          font-size: 15px;
          color: #333;

          .flex();
          align-items: center;
          justify-content: space-between;
          overflow: hidden;
          .title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: bold;
          }
          .operate {
            flex-shrink: 0;
            visibility: hidden;
            /deep/.bj-icon {
              cursor: pointer;
              width: 30px;
              height: 30px;
              margin-left: 6px;
              border-radius: 50%;
              .flex();
              align-items: center;
              justify-content: center;
              &:hover {
                background: #f1f2f7;
              }
            }
          }
        }
        .body {
          flex: 1;
          background: #f6f9ff;
          overflow: hidden;
          position: relative;
          .custom-scrollbar();
          &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 0;
            height: 6px;
          }
          .ant-tree {
            li {
              width: 100%;
              .ant-tree-node-content-wrapper {
                width: calc(100% - 60px);
              }
            }
          }
          .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9;
          }
        }
      }
    }
  }
}
</style>
